<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="copyright" content="职教招生网">
<meta name="author" content="职教招生网">
<title>职教招生网</title>
<link rel="stylesheet" href="static/css/lib/vant.css">
<script src="./static/js/basic.js"></script>
<script src="./static/js/lib/vant.js"></script>
<script src="./static/js/component.js" defer></script>
<script src="./static/js/nav.js"></script>
</head>

<body>
  <div v-cloak class="main zxb-arts" id="app">
    <layout :header="true">
      <common-ban :img="ban"></common-ban>
      <div class="arts-m1 box">
        <common-title title="艺考生专区7大类" top="0.54" bottom="0.61"></common-title>
        <dl class="list flex-bect wrap">
          <dd v-for="(item, index) in m1" :key="index" class="item" :class="{on:index == 1 || index == 3 ||index == 5}">
            <div class="step">
              STEP<p class="num">0{{index+1}}</p>
            </div>
            <div class="en">{{item.en}}</div>
            <div class="name">{{item.name}}</div>
          </dd>
        </dl>
      </div>
      <div class="arts-m2 box">
        <common-title title="推荐参与计划人群" top="0.2" bottom="0.42"></common-title>
        <dl class="list flex-bect wrap">
          <dd v-for="(item, index) in m2" :key="index" class="item flex-lect" :class="'item'+index">
            <div class="txt" v-html="item"></div>
          </dd>
        </dl>
      </div>
      <form2-module tit="你还在纠结"></form2-module>
      <div class="arts-m3 box" v-if="m3.length > 0">
        <common-title title="推荐参与计划人群" top="0.64" bottom="0.44"></common-title>
        <div class="tabs ov">
          <dl class="tab">
            <dd v-for="(item, index) in m3" :key="index" class="item flex-lect" :class="{on: index === m3Idx}" @click="m3Idx = index">
              <div class="div"><span class="num"><b>0{{index+1}}</b> / </span><b>{{item.name}}</b></div>
            </dd>
          </dl>
        </div>
        <div class="con flex-bect">
          <div class="image">
            <div class="txt">Art vs. college art</div>
            <img :src="m3[m3Idx].image" />
          </div>
          <div class="div">
            <div class="name flex-bect">{{m3[m3Idx].name}}</div>
            <div class="intro" v-html="m3[m3Idx].intro"></div>
          </div>
        </div>
      </div>
      <form3-module></form3-module>
      
    </layout>
  </div>

  <script type="text/babel">
    new Vue({
      el: '#app',
      data: {
        ban:'./static/image/25arts/banner.png',
        m1:[],
        m2:[],
        m3:[],
        m3Idx:0,
        m4:[],
      },
      mounted() {
        this.getCon();
      },
      methods:{
        onConfirm1(v) {
          console.log('00000000',v)
          this.show3 = false;
          this.form.zy = v
        },
        onConfirm2(v) {
          console.log('2222',v)
          this.show3 = false;
        },
        getShow(e){
          console.log(e, this.zy, this.city)
          this[e] = true;
        },
        getCon(){
          // <span class="red"></span>
          this.m1 = [
            {en:'Fine arts major', name:'美术类专业'},
            {en:'Music category', name:'音乐、器乐类'},
            {en:'Director class', name:'编导类专业'},
            {en:'Performance major', name:'表演类专业'},
            {en:'Dance major', name:'舞蹈类专业'},
            {en:'Broadcasting', name:'播音主持类'},
          ]
          this.m2 = [
            '<span class="red">联考失利、校考无望</span><br>的艺考生',
            '文化课<span class="red">低于300分的</span><br>艺考生',
            '有<span class="red">某种特长</span>的文理科<br>学生',
            '想<span class="red">上重点大学</span>的<br>艺考生',
            '想<span class="red">继续升学</span>的<br>中专生',
            '高考无望<span class="red">的文理科<br>学生</span>'
          ]
          this.m3 = [
            {name:"招生政策", image:'./static/image/25arts/2-1.png', intro:'<span class="red">艺考录取：</span><br>考试3次，艺术统考（联考）、艺术校 考、统一高考，成绩合格后取得名额<br><br><span class="red">计划外录取：</span><br>考试1次，计划外专本科'},
            {name:"报考专业", image:'./static/image/25arts/2-2.png', intro:'<span class="red">艺考录取：</span><br>考试3次，艺术统考（联考）、艺术校 考、统一高考，成绩合格后取得名额<br><br><span class="red">计划外录取：</span><br>考试1次，计划外专本科'},
            {name:"授予学位", image:'./static/image/25arts/2-3.png', intro:'<span class="red">艺考录取：</span><br>考试3次，艺术统考（联考）、艺术校 考、统一高考，成绩合格后取得名额<br><br><span class="red">计划外录取：</span><br>考试1次，计划外专本科'},
            {name:"录取方式", image:'./static/image/25arts/2-4.png', intro:'<span class="red">艺考录取：</span><br>考试3次，艺术统考（联考）、艺术校 考、统一高考，成绩合格后取得名额<br><br><span class="red">计划外录取：</span><br>考试1次，计划外专本科'},
            {name:"竞争压力", image:'./static/image/25arts/2-5.png', intro:'<span class="red">艺考录取：</span><br>考试3次，艺术统考（联考）、艺术校 考、统一高考，成绩合格后取得名额<br><br><span class="red">计划外录取：</span><br>考试1次，计划外专本科'},
          ]
          let item = {
            logo:'./static/image/school/school8.png',
            name:'广东外语外贸大学高等继续教育学院',
            ys:'“211工程”建设高校订单培养学生入学签订就业推荐协议',
            city:'北京'
          }
          this.m4 = [item,item,item,item,item,item,item,item,item,item]
        }
        
      }
    })
  </script>
</body>
</html>